---
{
"title": "Filtre de balise",
"language": "fr",
"category": "Plugiciels",
"categoryfile": "plugins",
"description": "Filtre le contenu et affiche/masque le contenu qui correspond à certaines balises.",
"altLangPrefix": "tagfilter",
"dateModified": "2022-09-10"
}
---

<div class="alert alert-warning">
	<h2>Fonctionnalité instable</h2>
	<p>À utiliser <strong>à vos risques et périls</strong>. Cette fonctionnalité décrite ci-dessous peut être supprimée dans toute version mineure/majeure ultérieure</p>
	<p><small><a href="https://wet-boew.github.io/wet-boew-documentation/decision/10.html">Apprenez-en plus sur la décision de conception concernant les fonctionnalités provisoires (anglais seulement).</a></small></p>
	<p><small><a href="../../../docs/ref/provisional-fr.html">Jetez un coup d'œil aux autres fonctionnalités provisoires disponibles.</a></small></p>
</div>

<span class="wb-prettify all-pre"></span>

<h2>Objectif</h2>
<p property="description">Filtre le contenu et affiche/masque le contenu qui correspond à certaines balises.</p>

<h2>Utiliser quand</h2>
<p>Vous souhaitez filtrer une longue liste d'éléments.</p>

<h2>Conseils d'accessibilité</h2>
<p>Les contrôles de filtre (cases à cocher, boutons radio, listes déroulantes) <strong>doivent</strong> apparaître avant la liste des éléments qu'ils contrôlent.</p>

<h2>Exemple fonctionnel</h2>
<p><a href="../../../demos/tagfilter/tagfilter-en.html">Exemple en anglais</a></p>
<p><a href="../../../demos/tagfilter/tagfilter-fr.html">Exemple français</a></p>

<h2>Comment mettre en œuvre</h2>
<h3>Enveloppez votre section et ajoutez les balises à vos items.</h3>
<ol>
	<li>Enveloppez toute la section qui va être filtrée par balises dans un <code>&lt;div class="wb-tagfilter provisional"></code>.</li>
	<li>Ajoutez l'attribut <code>data-wb-tags</code> à chaque item dont vous souhaitez contrôler la visibilité, et définissez une ou plusieurs balises comme valeur. Utilisez un espace régulier entre chaque balise, par exemple, <code>data-wb-tags="balise1 balise2 balise3"</code>.</li>
</ol>

<h3>Identifiez le conteneur de vos items</h3>
<p>Ajoutez la classe <code>.wb-tagfilter-items</code> à l'élément enveloppant vos items avec balises. Par exemple:</p>
<pre><code>&lt;ul class="wb-tagfilter-items">
	&lt;li data-wb-tags="tag1">Item 1&lt;/li>
	&lt;li data-wb-tags="tag2">Item 2&lt;/li>
	&lt;li data-wb-tags="tag1">Item 3&lt;/li>
	&lt;li data-wb-tags="tag2">Item 4&lt;/li>
	&lt;li data-wb-tags="tag1">Item 5&lt;/li>
	...
&lt;/ul></code></pre>

<h3>Ajoutez vos contrôles de filtre</h3>
<h4>Pour les cases à cocher</h4>
<ol>
	<li>Créez votre case à cocher. <strong>L'attribut <code>name</code> est obligatoire pour les cases à cocher</strong>.</li>
	<li>Ajoutez l'attribut <code>value</code> à la case à cocher. Remarque&nbsp;: la valeur de cet attribut doit être identique à celle de la balise ajoutée à l'élément ou aux éléments qui pourront être contrôlés, par exemple, <code>value="maBalise"</code>.</li>
	<li>Ajoutez la classe CSS <code>wb-tagfilter-ctrl</code> à la case à cocher.</li>
</ol>
<p>Votre case à cocher finale devrait ressembler à ceci&nbsp;:</p>
<pre><code>&lt;input type="checkbox" name="myCheckboxGroup" class="wb-tagfilter-ctrl" value="maBalise"></code></pre>

<h4>Pour les boutons radio</h4>
<ol>
	<li>Créez votre bouton radio. <strong>L'attribut <code>name</code> est obligatoire pour les boutons radio</strong>.</li>
	<li>Ajoutez l'attribut <code>value</code> au bouton radio. Remarque&nbsp;: la valeur de cet attribut doit être la même que celle de la balise ajoutée à l'élément ou aux éléments qui pourront être contrôlés, par exemple, <code>value="maBalise"</code>.</li>
	<li>Ajoutez la classe CSS <code>wb-tagfilter-ctrl</code> à la case à cocher.</li>
</ol>
<p>Votre bouton radio final devrait ressembler à ceci&nbsp;:</p>
<pre><code>&lt;input type="radio" name="myRadioGroup" class="wb-tagfilter-ctrl" value="maBalise"></code></pre>

<h4>Pour les listes déroulantes</h4>
<ol>
	<li>Créez votre liste déroulante avec votre option par défaut. <strong>L'attribut <code>name</code> est obligatoire pour les listes déroulantes</strong>.</li>
	<li>Ajoutez la classe CSS <code>wb-tagfilter-ctrl</code> à la case à cocher.</li>
	<li>Ajoutez vos autres options et définissez l'attribut <code>value</code>. Remarque&nbsp;: la valeur de cet attribut doit être la même que celle de la balise ajoutée à l'élément ou aux éléments qui pourront être contrôlés, par exemple, <code>value="maBalise"</code>.</li>
</ol>
<p>Votre liste déroulante finale devrait ressembler à ceci&nbsp;:</p>
<pre><code>&lt;select name="myDropdown" class="wb-tagfilter-ctrl">
	&lt;option value="">Tous&lt;/option>
	&lt;option value="maBalise">Ma balise&lt;/option>
	&lt;option value="maBalise2">Ma balise 2&lt;/option>
	&lt;option value="maBalise3">Ma balise 3&lt;/option>
&lt;/select></code></pre>
<p><strong>Remarque&nbsp;:</strong> ajoutez une <code>valeur</code> vide à votre option afin d'afficher tous les items.</p>

<h4>Pour la plage de dates</h4>
<ol>
	<li>Créez votre champ <code>type="date"</code> pour la date de début ou de fin</li>
	<li>L'attribut <code>name</code> est obligatoire et doit être soit <code>startDate</code> soit <code>endDate</code></li>
	<li>Ajoutez la classe CSS <code>wb-tagfilter-ctrl</code> à l'input.
		<p>Vos champs de date finaux devraient ressembler à ceci :</p>
		<pre><code>&lt;label for=&quot;dateRangeStart&quot;&gt;Date de début :&lt;/label&gt;
	&lt;input type=&quot;date&quot; id=&quot;dateRangeStart&quot; name=&quot;startDate&quot; class=&quot;wb-tagfilter-ctrl form-control&quot;&gt;
	&lt;label for=&quot;dateRangeEnd&quot;&gt;Date de fin :&lt;/label&gt;
	&lt;input type=&quot;date&quot; id=&quot;dateRangeEnd&quot; name=&quot;endDate&quot; class=&quot;wb-tagfilter-ctrl form-control&quot;&gt;</code></pre>
	</li>
	<li><p>Ajoutez un élément <code>&lt;time&gt;</code> à l'élément étiqueté. L'attribut <code>datetime</code> de l'élément <code>&lt;time&gt;</code> doit contenir la <strong>date ISO</strong> de l'élément. C'est ce que le filtre de plage de dates utilise pour faire correspondre les éléments.</p>
	<pre><code>&lt;li data-wb-tags=&quot;tag1 tag2&quot;&gt;
&lt;time datetime=&quot;2025-09-10&quot;&gt;Mercredi 10 septembre 2025&lt;/time&gt;
...
	&lt;/li&gt;</code></pre>
	</li>
</ol>
<p>Cela permet au plugiciel de filtrer les éléments étiquetés en fonction de l'attribut datetime de leurs éléments <code>&lt;time&gt;</code>. Vous pouvez utiliser soit la date de début, soit la date de fin, ou les deux ensemble.</p>


<h3>Ajoutez votre élément pour aucun résultat</h3>
<p>En option, vous pouvez ajouter un élément qui s'affichera lorsqu'aucun item n'est visible. Identifiez cet élément avec la classe CSS <code>wb-tagfilter-noresult</code>.</p>
<p>Cet élément doit être ajouté <strong>directement</strong> après l'élément enveloppant votre liste d'items (<code>.wb-tagfilter-items</code>).</p>
<p>Par exemple&nbsp;:</p>
<pre><code>&lt;ul class="wb-tagfilter-items">
	&lt;li data-wb-tags="tag1">Item 1&lt;/li>
	&lt;li data-wb-tags="tag2">Item 2&lt;/li>
	&lt;li data-wb-tags="tag1">Item 3&lt;/li>
	&lt;li data-wb-tags="tag2">Item 4&lt;/li>
	&lt;li data-wb-tags="tag1">Item 5&lt;/li>
	...
&lt;/ul>
&lt;div class="wb-tagilfter-noresult">
	&lt;p>Aucun élément ne correspond à cette combinaison de filtres.&lt;/p>
&lt;/div></code></pre>

<h3>Comportement essentiel de la composante</h3>
<ul>
	<li>Par défaut, pour chaque groupe de filtres de cases à cocher, si aucune case n'est cochée, cela a le même effet que si toutes les cases étaient cochées.</li>
	<li>Le comportement de plusieurs cases à cocher dans un groupe est d'afficher les items dont l'une des balises est sélectionnée (comportement <span lang="en">"OR"</span>), et non d'afficher les éléments dont toutes les balises sont sélectionnées (comportement <span lang="en">"AND"</span>).</li>
</ul>

<h3>Remarques</h3>
<p>Pour des raisons sémantiques, chaque groupe logique de filtres devrait être enveloppé par un élément <code>&lt;fieldset></code>.</p>
